<template>
  <el-tabs v-model="activeName" type="card" class="monthlyBill">
    <el-tab-pane label="账款追踪" name="first">
      <tab-track />
    </el-tab-pane>
    <el-tab-pane label="对账单" name="second">
      <tab-statements />
    </el-tab-pane>
    <el-tab-pane label="差额审批" name="third">
      <TabApproval />
    </el-tab-pane>
    <el-tab-pane label="账款统计" name="fourth">
      <TabStatistics />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  import TabTrack from './TabTrack'
  import TabStatements from './TabStatements'
  import TabApproval from './TabApproval.vue'
  import TabStatistics from './TabStatistics.vue'
  export default {
    name: 'monthlyBill',
    components: {
      TabTrack,
      TabStatements,
      TabApproval,
      TabStatistics
    },
    data() {
      return {
        activeName: 'first'
      }
    }
  }
</script>

<style lang="scss" scoped>
.monthlyBill {
  height: 100%;
  /deep/.el-tabs__content {
    height: calc(100% - 66px);
    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>
